<%@page import="com.lrkj.back.entity.ZsEquip" %>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8">


    <link rel="stylesheet" href="${ctx}/css/sapar.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/css/common.css"/>
    <script type="text/javascript" src="${ctx}/js/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/js/sapar.js"></script>
    <script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>

    <script src="${ctx}/js/share.js" type="text/javascript"></script>
    <script src="${ctx}/js/mask.js" type="text/javascript"></script>

    <link rel="stylesheet" href="${ctx}/css/jquery-ui-1.9.2.custom.css" type="text/css">
    <script src="${ctx}/js/jquery-ui-1.9.2.custom.js" type="text/javascript" language="javascript"></script>

    <title>追溯功能</title>
    <style type="text/css">
        /*.tab {*/
        /*background-color: white;*/
        /*}*/

        /*#txt {*/
        /*margin-top: -4px;*/
        /*}*/

        /*#txt1 {*/
        /*margin-top: 4px;*/
        /*}*/

        /*.nav_list {*/
        /*float: left*/
        /*}*/

        /*.nav_list ul {*/
        /*float: left*/
        /*}*/

        /*.nav_list ul li {*/
        /*float: left;*/
        /*padding: 0 10px;*/
        /*height: 30px;;*/
        /*line-height: 30px;*/
        /*font-size: 14px;*/
        /*color: #333*/
        /*}*/

        /*.nav_list ul li.native {*/
        /*background-color: #6ab96e;*/
        /*color: #fff*/
        /*}*/
        body{
            text-align: center;
        }
        th {
            text-align: center;
        }

        td {
            text-align: center;
        }

        .wcz {
            color: red;
        }

        .ulList {
            float: left;
        }

        .ulList {
            width: 30%;
            height: 200px;
            font-family: 微软雅黑;
            font-size: 15px;
            border: 1px solid #999999;
            padding: 5px 5px 5px 5px;
            margin: 5px 5px 5px 5px;
            text-align: left;
        }

        .msg {
            width: 72%;
            height: auto;
            float: right;
        }
        .search_msg{
            width: 27%;
            height: auto;
            float: left;
        }
        .packagecode{
            margin: 0 auto;
            margin-bottom: 10px;
        }
        .search-box{
            margin: 5px 5px 5px 5px;
        }
        .packageIm{
            margin: 0 auto;
            border: 1px solid #999999;
            background-color:#eeeeee;
        }
        .packageMsg{
            margin: 0 auto;
            width: 280px;
            height: 80px;
        }
        li{
            padding: 2px 2px 2px 2px;
        }
        .top{
            margin: 0 auto;
            /*margin-top: 10px;*/
            width: 280px;
            /*height: 100px;*/
        }
        .body{
            margin: 0 auto;
            /*margin-top: 10px;*/
            width: 280px;
        }

        .btn{
            margin: 0 auto;
            width: 100px;
            margin: 0 auto;
            display: block;
        }
        h1{
            text-align: center;
            font-family: 黑体;
            background-color:#33ffdd;
            font-size: 18px;
        }
        .search_msg{
            background-color: #efffff
        }




    </style>


</head>
<body>
<div>
    <div class="subfiled clearfix">
        <h2>追溯功能</h2>
    </div>
    <div class="subfiled-content">

    </div>
</div>
<div id="saper-container">
    <div id="mask" class="mask"></div>
    <div class="subfiled-content" id="app" >
        <div class="tab-container" data-trigger="click">
            <%--<div class="tab">--%>
            <%--<a href="javascript:;" class="current">基本信息</a>--%>
            <%--<a href="javascript:;">回收信息</a>--%>
            <%--<a href="javascript:;">清洗信息</a>--%>
            <%--<a href="javascript:;">配包信息</a>--%>
            <%--<a href="javascript:;">灭菌信息</a>--%>
            <%--<a href="javascript:;">发放信息</a>--%>
            <%--<a href="javascript:;">使用信息</a>--%>
            <%--</div>--%>
            <div class="search_msg">
                <div class="search-box ">
                    <div class="packagecode">
                        <label>物品条码：</label>
                        <input style="height: 24px ;width : 205px;" type="text" id="searchTxt" name="searchTxt" placeholder="包条码/包名"
                               v-model=searchTxt  class="search_text" @keyup.enter="findByName">
                    </div>

                    <div class="packagecode">
                        <label>回收时间：</label>
                        <input  style="width: 170px" name="time" id="time" type="text"
                               class="ui-datepicker-time"/>
                        <div class="ui-datepicker-css">
                            <div class="ui-datepicker-quick">
                                <p>快捷日期<a class="ui-close-date">X</a></p>
                                <div>
                                    <input @click="timeChangeFun" class="ui-date-quick-button" type="button" value="今天" alt="0"
                                           name=""/>
                                    <input @click="timeChangeFun" class="ui-date-quick-button" type="button" value="昨天" alt="-1"
                                           name=""/>
                                    <input @click="timeChangeFun" class="ui-date-quick-button" type="button" value="7天内"
                                           alt="-6" name=""/>
                                    <input @click="timeChangeFun" class="ui-date-quick-button" type="button" value="14天内"
                                           alt="-13" name=""/>
                                    <input @click="timeChangeFun" class="ui-date-quick-button" type="button" value="30天内"
                                           alt="-29" name=""/>
                                    <input @click="timeChangeFun" class="ui-date-quick-button" type="button" value="60天内"
                                           alt="-59" name=""/>
                                </div>
                            </div>
                            <div class="ui-datepicker-choose">
                                <p>自选日期</p>
                                <div class="ui-datepicker-date">
                                    <input @click="timeChangeFun" name="startDate" id="startDate" class="startDate" readonly
                                           value="2014/12/20" type="text">
                                    -
                                    <input @click="timeChangeFun" name="endDate" id="endDate" class="endDate" readonly
                                           value="2014/12/20" type="text" disabled onchange="datePickers()">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="height: 30px" class="packagecode">
                        <a style="margin-left: 235px ;" href="javascript:;" @click="findByName" class="sapar-btn sapar-btn-recom query-btn">查询</a>
                    </div>
                    <div class="packageMsg">
                        <ul class="packageIm" style="text-align: left" v-model=packageIm>
                            <li>包名：{{packageIm.packageName}}</li>
                            <li>包条码：{{packageIm.packageTiaoma}}</li>
                            <%--<li>包位置：已完成回收</li>--%>
                        </ul>
                    </div>
                    <div class="table top">
                        <table>
                            <thead>
                            <tr>
                                <th>物品包编号</th>
                                <th>回收时间</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="table body" style="height: 150px;overflow-y: scroll">
                        <table >

                            <tbody>
                                <tr v-for="(package,index) in packageList" :key="package.packageTiaoma" @click="showPackage(package,$event)">
                                    <td v-bind:data="index">{{package.packageTiaoma}}</td>
                                    <td>{{package.huishouTime}}</td>
                                </tr>
                            </tbody>

                        </table>
                    </div>

                    <div style="margin-top: 10px">
                        <p><input class="qingxibao" type="button" value="灭菌追溯"></p>
                        <p><input class="miejunbao" type="button" value="清洗追溯"></p>
                        <%--<p><input class="btn" type="button" value="打印记录"></p>--%>
                    </div>
                </div>
            </div>
            <div class="msg">
                <div class="ulList">
                    <h1 class="ui-accordion-header">回收信息</h1>
                    <ul v-model=packageIm>
                        <li>物品包名称：{{packageIm.packageName}}</li>
                        <li>回收科室：{{depMap[packageIm.packageKeshi]}}</li>
                        <li>回收人：{{empMap[packageIm.huishouHuishourenTiaoma]}}</li>
                        <li>回收交接人:{{empMap[packageIm.huishouJiaojierenTiaoma]}}</li>
                        <li>回收时间:{{packageIm.huishouTime}}</li>
                    </ul>
                </div>
                <div class="ulList">
                    <h1>清洗信息</h1>
                    <ul>
                        <li>清洗流水：{{packageIm.qingxiLiushui}}</li>
                        <li>清洗机器：{{equipmap[packageIm.qingxiShebeiTiaoma]}}</li>
                        <li>清洗程序：{{softmap[packageIm.qingxiRuanjianTiaoma]}}</li>
                        <li>清洗人:{{empMap[packageIm.qingxiQingxirenTiaoma]}}</li>
                        <li>开始时间：{{packageIm.qingxiKaishiTime}}</li>
                        <li>结束时间：{{packageIm.qingxiJieshuTime}}</li>
                    </ul>
                </div>
                <div class="ulList">
                    <h1>配包信息</h1>
                    <ul>
                        <li>配包人：{{empMap[packageIm.peibaoPiebaorenTiaoma]}}</li>
                        <li>配包审核人：{{empMap[packageIm.peibaoShenherenTiaoma]}}</li>
                        <li>关包人:{{empMap[packageIm.peibaoGuanbaoTiaoma]}}</li>
                        <li>配包时间：{{packageIm.peibaoTime}}</li>
                    </ul>
                </div>
                <div class="ulList">
                    <h1>灭菌信息</h1>
                    <ul>
                        <li>灭菌流水：{{packageIm.miejunLiushui}}</li>
                        <li>灭菌机器：{{equipmap[packageIm.miejunShebeiTiaoma]}}</li>
                        <li>灭菌软件：{{softmap[packageIm.miejunRuanjianTiaoma]}}</li>
                        <li>灭菌人:{{empMap[packageIm.miejunMeijunrenTiaoma]}}</li>
                        <li>开始时间：{{packageIm.miejunKaishiTime}}</li>
                        <li>结束时间：{{packageIm.miejunJieshuTime}}</li>
                    </ul>
                </div>
                <div class="ulList">
                    <h1>发放信息</h1>
                    <ul>
                        <li>发放流水：{{packageIm.fafangLiushui}}</li>
                        <li>发放时间：{{packageIm.fafangTime}}</li>
                        <li>发放人：{{empMap[packageIm.fafangrenTiaoma]}}</li>
                        <li></li>
                    </ul>
                </div>
                <div class="ulList">
                    <h1>使用信息</h1>
                    <ul>
                        <li>病人姓名：{{packageIm.patientId}}</li>
                        <li>住院号：{{packageIm.patientHospitalNo}}</li>
                        <li>手术名：{{packageIm.shoushuTemplate}}</li>
                        <li>使用时间：{{packageIm.shiyongTime}}</li>
                    </ul>
                </div>
                <div class="ulList">
                    <h1>返洗信息</h1>

                    <div v-if="zsQingxi !== null && zsQingxi !== '' ">
                        <ul>
                            <li>回收人：{{empMap[zsQingxi.qingxiQingxirenTiaoma]}}</li>
                            <li>清洗机器：{{equipmap[zsQingxi.qingxiShebeiTiaoma]}}</li>
                            <li>清洗开始时间：{{zsQingxi.qingxiKaishiTime}}</li>
                            <li>清洗结束时间：{{zsQingxi.qingxiJieshuTime}}</li>
                        </ul>
                    </div>
                    <div v-else>
                        <ul>
                            <li>暂无信息</li>
                       </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <%--<div id="saper-ft">--%>
        <%--<div id="kkpager"></div>--%>
    <%--</div>--%>
</div>
</body>
<script type="text/javascript" src="${ctx}/js/vue.min.js"></script>
<script type="text/javascript">
    $(function () {
        <%--var totalPage = ${total};--%>
        <%--var pageNo = getParameter('pageIndex');--%>
        <%--if (!pageNo) {--%>
            <%--pageNo = 1;--%>
        <%--}--%>
        //生成分页
        //有些参数是可选的，比如lang，若不传有默认值
        <%--kkpager.generPageHtml({--%>
            <%--pno: pageNo,--%>
            <%--//总页码--%>
            <%--total: totalPage,--%>
            <%--//链接前部--%>
            <%--hrefFormer: '${ctx}/zhuisuPackage/packageingList',--%>
            <%--//链接尾部--%>
            <%--hrefLatter: '.do',--%>
            <%--getLink: function (n) {--%>
                <%--return this.hrefFormer + this.hrefLatter + "?pageIndex=" + n + "&searchTxt=" + $(".search_text").val();--%>
            <%--}--%>
        <%--});--%>

        <%--$(".query-btn").click(function () {--%>
            <%--var tiaojian = $(".search_text").val();--%>
            <%--var shijianleixin = $("#tiaojianone").val();--%>
            <%--var starttime = $("#st").val();--%>
            <%--var endtime = $("#et").val();--%>
            <%--var start = new Date(starttime.replace("-", "/").replace("-", "/"));--%>
            <%--var end = new Date(endtime.replace("-", "/").replace("-", "/"));--%>
            <%--if (end < start) {--%>
                <%--alert("终止时间不能在起始时间之前");--%>
            <%--}--%>
            <%--window.location.href = "${ctx}/zhuisuPackage/packageingList.do?searchTxt=" + $(".search_text").val() + "&leixin=" + shijianleixin + "&startTime=" + starttime + "&endTime=" + endtime;--%>
        <%--});--%>

        $(".huishouwanglan").click(function () {
            var huishouwl = $(this).attr("value");
            layer.open({
                type: 2,
                title: '同一个网篮的包',
                maxmin: true,
                moveOut: true,
                shadeClose: true, //点击遮罩关闭层
                area: ['700px', '450px'],
                content: "${ctx}/zhuisuPackage/huishouwanglan.do?huishouwl=" + huishouwl
            });

        });

        $(".qingxibao").click(function () {
            var qingxibao = vm.packageIm.qingxiLiushui;
            layer.open({
                type: 2,
                title: '同时清洗的包',
                maxmin: true,
                moveOut: true,
                shadeClose: true, //点击遮罩关闭层
                area: ['700px', '450px'],
                content: "${ctx}/zhuisuPackage/qingxibao.do?qingxibao=" + qingxibao
            });

        });

        $(".miejunbao").click(function () {
            var miejunbao = vm.packageIm.miejunLiushui;
            layer.open({
                type: 2,
                title: '同时灭菌的包',
                maxmin: true,
                moveOut: true,
                shadeClose: true, //点击遮罩关闭层
                area: ['700px', '450px'],
                content: "${ctx}/zhuisuPackage/miejunbao.do?miejunbao=" + miejunbao
            });
        });
    })

//    $(document).keydown(function (event) {
//        var oPlay0 = document.getElementById("audio");
//        var oPlay1 = document.getElementById("audio1");
//        var packageName = $("input[name='packageName']").val();
//        if (event.keyCode == 13) {
//            if ($("#searchTxt").is(":focus")) {
//                selectBytype();
//            }
//        }
//    });

    var vm = new Vue({
        el :'#app',
        data:{
            packageList:[],
            searchTxt:"",
            packageIm:"",
            depMap:{},
            softmap:{},
            equipmap:{},
            empMap:{},
            time:"",
            zsQingxi:null,

        },
        watch:{
            time:function () {
                this.findByName();
            }

        },
        created:function () {
//            this.findByName();
        },
        methods:{
            findByName:function () {
                var searchTxt = this.searchTxt;
                var time = this.time;
                showMask();
                $.get("/zhuisuPackage/findPackList?searchTxt="+searchTxt+"&time="+time,function (data) {
                    if(data.status==true){
                        hideMask();
                        vm.packageList = data.packageList;
                        vm.depMap =data.depMap;
                        vm.empMap = data.empMap;
                        vm.softmap = data.softmap;
                        vm.equipmap = data.equipmap;
                        if(vm.packageList.length==1){
                            debugger
                            vm.packageIm = vm.packageList[0];
                            vm.zsQingxi = data.packageList[0].zsQingxi;
                        }
                    }else{
                        hideMask();
                        alert(data.msg);
                    }

                })
            },


            B: function() {
                var that = this;
                var timevar = $("#time").val();
                if(that.time!=timevar){
                    that.time = timevar;
                }
            },

            timeChangeFun:function () {
                setInterval(this.B, 800)

            },
            showPackage:function (data,event) {
//                event.target.style.background_color="red";
                $(event.target).parent().addClass("xuanzhong").siblings().removeClass("xuanzhong");
                vm.packageIm = data;
                vm.zsQingxi = data.zsQingxi;
            }
        }
    });


    function selectBytype() {
        $(".query-btn").click();
    }

    function getParameter(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>
</html>